<template class="window">
  <div class="main_div">
    <img class="image" src="../assets/register.png" />
    <div class="input_div">
      <div class="title">
        <div class="login_title">注册七尾客服云</div>
      </div>
      <div class="input_div_style">
        <div class="input_div_font">
          <label class="label1">邮箱</label>
          <input
            v-model="email"
            class="account_input"
            type="text"
            placeholder="请输入注册邮箱"
            tabindex="0"
          />
        </div>
      </div>
      <div class="input_div_style">
        <span class="input_div_font">
          <label class="label2">密码</label>
          <input
            v-model="password"
            class="password_input"
            type="password"
            placeholder="请输入登录密码"
            tabindex="0"
          />
        </span>
      </div>
      <div class="input_div_style vcode-input">
        <span class="input_div_font">
          <label class="label2">验证码</label>
          <input
            v-model="captcha"
            class="account_input"
            type="text"
            placeholder="请输入右侧图形验证码"
            tabindex="0"
          />
        </span>
        <div>
          <img src="../assets/u45.png" class="verification-vode-style" />
        </div>
      </div>
      <div class="button_div">
        <input class="button_style" @click="register" type="button" value="注册" />
      </div>
      <div class="link2">
        <router-link to="/login" style="font-size: 15px;text-decoration: none ;color:white">已有账号，去登陆</router-link>
      </div>
    </div>
  </div>
</template>

<script>
// import Root from "./Root";
import api from "@/api/api";
import { Loading } from "element-ui";
export default {
  name: "Register",
  components: {},
  data() {
    return {
      email: "",
      password: "",
      captcha: ""
    };
  },
  methods: {
    formValidation() {
      // 处理表单验证
      if (this.email && this.password) {
        let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if (!reg.test(this.email)) {
          return "请填写正确的邮箱格式";
        }
        if (this.password.length < 6) {
          return "登录密码不能少于6位";
        } else {
          return "表单验证成功";
        }
      } else {
        return "请填写登录邮箱或登录密码";
      }
    },
    register() {
      let msg = this.formValidation();

      if (msg == "表单验证成功") {
        let loadingInstance = Loading.service({
          fullscreen: true,
          text: "正在注册"
        });
        api
          .registerAPI({
            email: this.email,
            password: this.password
          })
          .then(res => {
            let { error, data } = res.data;
            loadingInstance.close();
            if (error) {
              this.$message.error(data);
            } else {
              this.$message({
                message: "注册成功",
                type: "success"
              });
              this.$router.replace({ path: "/login" });
            }
          });
      } else {
        this.$message.error(msg);
      }
    }
  }
};
</script>
<style scoped>
.image {
  margin-top: 110px;
  margin-left: 140px;
  width: 750px;
  height: 600px;
}
.main_div {
  width: 100vw;
  height: 100vh;
  background-color: #e6f1ff;
  position: relative;
}
.input_div {
  width: 435px;
  height: 500px;
  background-color: #006efe;
  position: absolute;
  right: 180px;
  top: 160px;
  border-radius: 5px;
  padding: 52px 45px;
  box-sizing: border-box;
}
.login_title {
  font-kerning: normal;
  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC";
  font-weight: 650;
  color: #ffffff;
  font-size: 32px;
  padding-bottom: 35px;
}
.input_div_style {
  height: 48px;
  background-color: #ffffff;
  border-radius: 3px;
  margin: 15px 0;
}
.input_div_font {
  line-height: 48px;
  margin-left: 20px;
  font-size: 15px;
}
.account_input {
  border: none;
  outline: none;
  margin-left: 10px;
}
.password_input {
  border: none;
  outline: none;
  margin-left: 10px;
}
.link1 {
  color: white;
  font-size: 13px;
  float: right;
}
.button_style {
  width: 100%;
  height: 50px;
  background-color: #ff9138;
  color: white;
  border: none;
  text-align: center;
  font-size: 16px;
  border-radius: 3px;
  margin-top: 22px;
  cursor: pointer;
}
.link2 {
  color: white;
  margin-top: 15px;
  font-size: 13px;
  height: 40px;
  text-align: center;
}
input::-webkit-input-placeholder {
  color: #ccc;
  font-size: 14px;
}
.verification-vode-style {
  width: 100px;
  height: 40px;
}
.vcode-input {
  display: flex;
  align-items: center;
}
</style>
